<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>判断鼠标是否在三角形内</title>
    <style>
        .box {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-left-color: #000;
            border-bottom-color: #000;
            border-right-color: #369;
            border-top-color: #369;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementsByTagName('div')[0];

            var tri1X1 = posLeft(oBox);
            var tri1X2 = tri1X1 + oBox.offsetWidth;
            var tri1X3 = tri1X2;

            var tri1Y1 = posTop(oBox);
            var tri1Y2 = tri1Y1;
            var tri1Y3 = tri1Y2 + oBox.offsetHeight;

            var tri2X1 = posLeft(oBox);
            var tri2X2 = tri2X1;
            var tri2X3 = tri2X2 + oBox.offsetWidth;

            var tri2Y1 = posTop(oBox);
            var tri2Y2 = tri2Y1 + oBox.offsetHeight;
            var tri2Y3 = tri2Y2;

            onTriangle(oBox, tri1X1, tri1Y1, tri1X2, tri1Y2, tri1X3, tri1Y3, function () {
                oBox.style.borderTopColor = '#F00';
                oBox.style.borderRightColor = '#F00';
            }, function () {
                oBox.style.borderTopColor = '#369';
                oBox.style.borderRightColor = '#369';
            }, function () {
                alert('三角1');
            });

            onTriangle(oBox, tri2X1, tri2Y1, tri2X2, tri2Y2, tri2X3, tri2Y3, function () {
                oBox.style.borderLeftColor = '#F00';
                oBox.style.borderBottomColor = '#F00';
            }, function () {
                oBox.style.borderLeftColor = '#000';
                oBox.style.borderBottomColor = '#000';
            }, function () {
                alert('三角2');
            });
        };

        function onTriangle(obj, x1, y1, x2, y2, x3, y3, inFn, outFn, clickFn) {
            bindEvent(obj, 'mouseover', function () {
                var triAll = triangleArea(x1, y1, x2, y2, x3, y3);

                bindEvent(obj, 'mousemove', function (ev) {
                    var ev = ev || window.event;

                    var disX = ev.clientX;
                    var disY = ev.clientY;

                    var tri1 = triangleArea(x1, y1, x2, y2, disX, disY);
                    var tri2 = triangleArea(x2, y2, x3, y3, disX, disY);
                    var tri3 = triangleArea(x3, y3, x1, y1, disX, disY);

                    var isIn = Math.abs(tri1 + tri2 + tri3 - triAll) < 1 / 10000;

                    if (isIn) {
                        if (inFn) {
                            inFn.call(this);
                        }

                        if (clickFn) {
                            bindEvent(obj, 'click', clickFn);
                        }
                    }
                    else {
                        if (outFn) {
                            outFn.call(this);

                        }

                        if (clickFn) {
                            delEvent(obj, 'click', clickFn);
                        }
                    }
                });
            });

            bindEvent(obj, 'mouseout', outFn);
        }

        function delEvent(obj, ev, fn) {
            if (obj.removeEventListener) {
                obj.removeEventListener(ev, fn, false);
            }
            else {
                obj.detachEvent('on' + ev, fn);
            }
        }

        function bindEvent(obj, ev, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(ev, fn, false);
            }
            else {
                obj.attachEvent('on' + ev, function () {
                    fn.call(obj);
                });
            }
        }

        function posLeft(obj) {
            var left = 0;

            while (obj) {
                left += obj.offsetLeft;
                obj = obj.offsetParent;
            };

            return left;
        }

        function posTop(obj) {
            var top = 0;

            while (obj) {
                top += obj.offsetTop;
                obj = obj.offsetParent;
            }

            return top;
        }

        function triangleArea(x1, y1, x2, y2, x3, y3) {
            var a = dist(x1, y1, x2, y2);
            var b = dist(x2, y2, x3, y3);
            var c = dist(x3, y3, x1, y1);
            var p = (a + b + c) / 2;
            var area = Math.sqrt(p * (p - a) * (p - b) * (p - c));

            return area;
        };

        function dist(x1, y1, x2, y2) {
            return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
        }
    </script>
</head>

<body>
    <div class="box"></div>
    <p>https://blog.csdn.net/aaysi2826/article/details/102193044</p>
    <!-- 
    做项目的时候需要实现一个翻页按钮的效果，如下图：
    
    
    
    
    
    一开始想到用图片热区做，可是后来发现热区做有问题，有一个按钮不能点击，调了层级顺序后可以点击，但是另外一个按钮又不能点击，于是决定模拟一个三角形热区的功能。
    
    
    
    首先：
    
    判断鼠标坐标是否在三角形内有很多种方法，比较简单的是面积法，即把一个大三角形（T）按照鼠标当前的点连接三个顶点，分成三份(A、B、C)，然后三个小三角形面积相加等于原来那个大三角形的面积，得出公式：T = A + B +
    C。但是JS有误差，所以用 Math.abs(A + B + C - T) < 0.0001 减小误差。 如何求三角形面积呢？ 1. 首先要求得三条边的边长a, b, c，然后再令 p=(a + b + c) / 2 2.
        套用求三角形面积公式算出三角型面积S：即 S=Math.sqrt(p * (p - a) * (p - b) * (p - c)) 现在还不知道三条边的边长，但是三角形三个顶点是已知的，那么可以用任意两点求得距离，算出三条边长。
        已知任意两点p1（x1, y1）、p2（x2, y2）的坐标如何求边长？ X轴坐标之差的平方加上Y轴坐标之差的平方，然后对其值开根号就是这两点间的距离。 得出公式 L=Math.sqrt((x1 - x2) * (x1 - x2)
        + (y1 - y2) * (y1 - y2)) 至此即可求出三角形的面积，再根据鼠标当前位置算出大三角形跟三个小三角形的面积，即可判断出此点是否在三角形内。 -->
</body>

</html>